<!--
  支持全选的多选框
-->
 
<template>
<div>
    <el-select v-model="selected" :collapse-tags="collapseTags" :multiple="multiple" class="all-select-box" size="mini" @change="handleChange" :style="{width:inputWidth+'px'}">
        <el-option v-if="multiple && data.length" id="select-all" ref="all" :class="{'selected': isSelectedAll,'divide-line': divideAll}" :label="allLabel" disabled value="@all" @click.stop.native="allClick">
        </el-option>
        <el-option v-for="item in data" :key="item[label] + item[_value]" :label="item[label]" :value="item[_value]">
        </el-option>
    </el-select>
</div>
</template>

<script>
export default {
    name: 'selectAll',
    model: {
        prop: 'value',
        event: 'v-model'
    },
    props: {
        // 全选框绑定值
        value: {
            type: Array,
            default: []
        },

        // 全选框数据
        data: {
            type: Array,
            default: []
        },

        // 全选按钮标题
        allLabel: {
            type: String,
            default: '全选'
        },

        // 是否用线将全选与其它选项分割
        divideAll: {
            type: Boolean,
            default: false
        },

        // 全选框对应配置
        option: {
            type: Object,
            default: () => ({
                // 设置label对应字段
                label: 'label',
                // 设置value对应字段
                value: 'value'
            })
        },

        // el-select原生属性
        multiple: {
            type: Boolean,
            default: true
        },
        collapseTags: {
            type: Boolean,
            default: true
        },
        inputWidth: {
            type: String,
            default: "180",
        },
    },
    computed: {
        // 当前的选中项列表
        selected: {
            get() {
                return this.value
            },
            set(v) {
                this.$emit('v-model', v)
            }
        },
        // 当前是否全选
        isSelectedAll: {
            get() {
                return this.data.every(i => this.selected.includes(i[this._value]))
            },
            set(v) {
                this.$emit('v-model', v ? this.data.map(i => i[this._value]) : [])
            }
        },
        label() {
            return this.option.label
        },
        _value() {
            return this.option.value
        },
    },
    methods: {
        handleChange() {
            this.$emit("allSelectChange",this.selected)
        },
        allClick(){
            
            this.isSelectedAll = !this.isSelectedAll;
            let all = [];
            if (!this.isSelectedAll) {
                for (let index = 0; index < this.data.length; index++) {
                    const element = this.data[index];
                    all.push(element.value);
                }
                this.$emit("allSelectChange",all)
            }else{
                all = [];
                this.$emit("allSelectChange",all)
            }
            
        },
    },
}
</script>

<style lang="less" scoped>
#select-all {
    cursor: pointer;
}

.divide-line {
    border-bottom: 1px solid rgba(123, 123, 123, .1);
}

#select-all:not(.selected) {
    color: #606266;
}

/deep/ .el-select-dropdown__item.hover {
    background-color: transparent !important;
}

#select-all:hover,
/deep/ .el-select-dropdown__item:hover {
    background-color: #f5f7fa !important;
}
</style>
